/**
 * @Creator: eyes
 * @Date: 2019/12/23
 */

import React from 'react';
import DateRangeSelector from '../common/DateRangeAndDurationSelector';
import Pages from './pages';
import useData from './data';
import './index.styl';

export default () => {
    const [{dateRange, duration, loading, performances}, updateTimeInfo] = useData();

    return (
        <div className="core-pages-overview-container">
            <div className="core-pages-overview-header">
                <div className="info-section">
                    <span className="title">核心页面首屏时间监控</span>
                    <span className="description">按天查看时，数据更新时间为T+1</span>
                </div>
                <hr className="line" />
                <div className="date-range-selector">
                    <DateRangeSelector
                        dateRange={dateRange}
                        duration={duration}
                        setDateRangeAndDuration={updateTimeInfo}
                    />
                </div>
            </div>
            <div className="core-pages-overview-graphs">
                <Pages
                    loading={loading}
                    performances={performances}
                    duration={duration}
                />
            </div>
        </div>
    );
};
